<template>
  <div class="box">

    <van-tabs v-model="active" :line-height=5 :line-width=80 title-style="{
    font-size:20px
  }">

      <van-tab title="应用中心" :ellipsis=false> </van-tab>
    </van-tabs>




    <div class="title">校务办公</div>
    <van-tabbar v-model="active" :fixed="false" inactive-color="gray" class="tab" route :border=false>
      <van-tabbar-item to="" replace>
        <span>教师签到</span>
        <template #icon="">
          <img src="../../../public/img/zhiwenyanzheng.png" class="icon" />
        </template></van-tabbar-item>

      <van-tabbar-item icon="search" to="/guest" replace> <span>访客管理</span>
        <template #icon="">
          <img src="../../../public/img/访客.png" class="icon" />
        </template><router-view /></van-tabbar-item>
      <van-tabbar-item icon="setting-o" to="/schoolMessage" replace><span>校园通知</span>
        <template #icon="">
          <img src="../../../public/img/通知.png" class="icon" />
        </template></van-tabbar-item>
      <van-tabbar-item icon="setting-o" to="/schoolNotice"><span>校园新闻</span>
        <template #icon="">
          <img src="../../../public/img/新闻.png" class="icon" />
        </template></van-tabbar-item>
    </van-tabbar>

    <div class="title">班级管理</div>
    <div id="second"> <van-tabbar v-model="active" :fixed="false" inactive-color="gray" class="tab" route :border=false>
        <van-tabbar-item icon="search" to="classNotice" replace><span>班级通知</span>
          <template #icon="">
            <img src="../../../public/img/按钮.png" class="icon" />
          </template></van-tabbar-item>
        <van-tabbar-item icon="search" to="classTrends" replace><span>班级动态</span>
          <template #icon="">
            <img src="../../../public/img/Tab_动态（未选中）.png" class="icon" />
          </template></van-tabbar-item>
      </van-tabbar>
    </div>

    <div class="title">智慧校园</div>
    <div id="second">
      <van-tabbar v-model="active" :fixed="false" inactive-color="gray" class="tab" route :border=false>
        <van-tabbar-item>
          <span>设备管理</span>
        <template #icon="">
          <img src="../../../public/img/设备管理.png" class="icon" />
        </template>

        </van-tabbar-item>
        <van-tabbar-item icon="search" to="/cardManage"><span>一卡通管理</span>
        <template #icon="">
          <img src="../../../public/img/刷卡.png" class="icon" />
        </template></van-tabbar-item>

      </van-tabbar>
    </div>

  </div>
  <router-view />
</template>

<script setup >

import { ref } from 'vue';
const active = ref(0);
const fixed = ref(false)

</script>
<style lang='scss' scoped>
.box {
  padding-top: 20px
}

.van-tabbar-item {
  width: 80px;
  height: 80px;
}

.icon {
  // width: 40px;
  height: 40px;

}

div {
  border: none;
}

#second {
  width: 50%;
}

.bangong {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

:deep(.van-tab) {
  flex: none;
  width: 110px;
}

.van-tabs__wrap {
  width: 120px;
}

:deep(.van-tab__text) {
  font-size: 20px;
  text-align: left;
}



#van-tabs-1-0 {
  margin-left: -100px;
}

.title {
  margin-top: 20px;
  color: #6cb6ff;
  font-size: 14px;
  font-family: "微软黑体";
  font-weight: bold;
  height: 40px;
  line-height: 40px;
  border: none;
}

.tab {
  height: 86px;
}
</style>